<template>
  <view class="container">
    <u-navbar
      :is-fixed="true"
      :border-bottom="false"
      :is-back="true"
      :background="{ background: '#fff' }"
      title="我的订单"
      title-color="#000"
    >
    </u-navbar>
    <u-toast ref="uToast" />
    <u-subsection :list="list" :current="index" @change="change($event)"></u-subsection>
    <u-empty v-if="orderList.length == 0" text="暂无数据" mode="list"></u-empty>
    <view v-for="order in orderList" class="each-order" @click="toDetail(order)">
      <view class="good" v-for="good in order.goodsinfo">
        <view class="title-wrap">
          <text class="title u-line-2">{{ good.name }}</text>
          <text class="row u-line-2">数量：{{ good.cnt }}</text>
          <text class="row u-line-2">洗衣方式：{{ good.way || '普通清洗' }}</text>
        </view>
      </view>
        <text class="row u-line-2" style="margin-top: 12rpx;">下单时间：{{ order.time }}</text>
      <view class="state">{{ order.status }}</view>
      <view class="op">
        <view v-if="order.state == '待收货'" class="btn" @click="updateOrder('待评价',order)">确认收货</view>
        <view v-if="order.state == '待收货' || order.state == '待评价'" class="btn" @click="updateOrder('申请退货',order)">退货</view>
        <view v-if="order.state == '待评价'" class="btn" @click="doComment(order)">评价</view>
      </view>
    </view>
    <!-- <u-modal title="评价" v-model="show" :title-style="{color: '#000'}" @confirm="confirm">
			<view class="slot-content" style="padding: 20rpx;">
        <u-input v-model="comment" :type="'textarea'" :border="border" />
			</view>
		</u-modal> -->
    <u-popup v-model="show" mode="bottom">
			<view class="comment">
        <view>
          <view class="p-title">添加图片</view>
          <u-upload :maxCount="3" ref="uUpload" :action="action"></u-upload>
        </view>
        <u-input style="margin-top: 200rpx;" height="500" v-model="comment" :type="'textarea'" :border="true" placeholder="展开说说对商品的想法吧..." />
        <view class="btn submit" @click="confirm">提交</view>
      </view>
		</u-popup>
  </view>
</template>

<script>
import { getOrder,updateOrder } from "../../api/system/api";
export default {
  data() {
    return {
      userInfo: {},
      index: 0,
      orderList: [],
      hideName: false,
			action: 'http://127.0.0.1:3000/upload',
      list: [
        {
          name: '全部'
        },
        {
          name: '待服务'
        },
        {
          name: '服务中'
        },
        {
          name: '已完成'
        },
        {
          name: '售后'
        },
        {
          name: '已取消'
        },
      ],
      show: false,
      comment: '',
      order: {},
      orderListAll: [], // 全部订单
    };
  },
  onLoad(option) {
    option = JSON.parse(option.item)
    if (option.text == '待服务') {
      this.index = 1;
    } else if (option.text == '服务中') {
      this.index = 2;
    } else if (option.text == '已完成') {
      this.index = 3;
    } else if (option.text == '售后') {
      this.index = 4;
    } else {
      this.index = 0
    }
    uni.getStorage({     
      key:'userInfo',
      success: (res) => {
        this.userInfo = res.data;
        this.getData()
      }
    })
    setTimeout(() => {
      if (!this.userInfo.id) {
        this.$refs.uToast.show({
					title: '未登录，请先登录',
					type: 'error',
				})
      }
    }, 1000)
  },
  methods: {
    getData() {
      getOrder(this.userInfo.id).then(res => {
        this.orderList = res.data.list.map(v => {
          return {
            ...v,
            goodsinfo: JSON.parse(v.goodsinfo)
          }
        })
        console.log(this.orderList)
        this.orderListAll = this.orderList
        this.filterOrder()
      })
    },
    filterOrder() {
      if (this.index == 0) {
        this.orderList = JSON.parse(JSON.stringify(this.orderListAll))
      } else if (this.index == 1) {
        this.orderList = JSON.parse(JSON.stringify(this.orderListAll.filter(v => v.status == '已付款' || v.status == '已送达')))
      } else if (this.index == 5) {
        this.orderList = JSON.parse(JSON.stringify(this.orderListAll.filter(v => v.status == '已取消')))
      } else if (this.index == 2) {
        this.orderList = JSON.parse(JSON.stringify(this.orderListAll.filter(v => v.status == '服务中' || v.status == '派送中')))
      } else if (this.index == 3) {
        this.orderList = JSON.parse(JSON.stringify(this.orderListAll.filter(v => v.status == '已完成')))
      } else if (this.index == 4) {
        this.orderList = JSON.parse(JSON.stringify(this.orderListAll.filter(v => v.status.includes('退款'))))
      }
    },
    change(v) {
      this.index = v;
      this.filterOrder()
    },
    updateOrder(state, order) {
      updateOrder(order.id, {
        state
      }).then(res => {
        this.$refs.uToast.show({
					title: '操作成功',
					type: 'success',
				})
        this.getData()
      })
    },
    doComment(order) {
      this.order = order;
      this.comment = ''
      this.show = true;
    },
    confirm() {
      let params = {
        state: '已完成',
      }
      if (!this.comment) {
        this.$refs.uToast.show({
					title: '请输入评价',
					type: 'error',
				})
        return
      }
      params.comment = this.comment
      if (this.$refs.uUpload.lists.length) {
        params.imgs = JSON.stringify(this.$refs.uUpload.lists.map(v => v.response.imgName))
      }

      updateOrder(this.order.id, params).then(res => {
        this.$refs.uToast.show({
					title: '操作成功',
					type: 'success',
				})
        this.show = false;
        this.getData()
      })
    },
    toDetail(order) {
      this.$u.route('/pages/order/orderDetail', {
        order: JSON.stringify(order)
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  overflow: hidden;
  background: #fafafa;
}
image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
}
.each-order {
  width: 96%;
  margin: 20rpx 2%;
  padding: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  position: relative;
}
.state {
  position: absolute;
  color: red;
  font-size: 26rpx;
  top: 14rpx;
  right: 20rpx;
}
.good {
  display: flex;
  margin-bottom: 10rpx;
}
.title {
  font-weight: bold;
  font-size: 30rpx;
  margin-bottom: 6rpx;
}
.row {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}
.pay {
  width: 100%;
  text-align: right;
}
.op {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
}
.btn {
  width: 150rpx;
  text-align: center;
  padding: 14rpx 20rpx; 
  background: red;
  color: #fff;
  font-size: 24rpx;
  border-radius: 30rpx;
  margin-left: 20rpx;
}
.comment {
  height: 80vh;
  padding: 30rpx 50rpx;
}
.p-title {
  font-weight: bold;
  margin-bottom: 30rpx;
}
.submit {
  width: 90%;
  margin-top: 100rpx;
  padding: 24rpx 20rpx;
  border-radius: 50rpx;
}
</style>
